html {
  font-size: 62.5%;
}
body {
  font-family: system-ui, sans-serif;
  color: CanvasText;
  background: Canvas;
}
form {
  width: min(30rem, 100% - 1rem);
  margin-inline: auto;
  margin-block: 4rem;
  input {
    box-sizing: border-box;
    padding-inline: 0.5rem;
    width: 100%;
    border: 1px solid lightgray;
    border-radius: 0.25rem;
    box-shadow: 0 2px 6px -4px rgba(0, 0, 0, 0.2);
  }
  button {
    all: unset;
    outline: revert;
    padding-inline: 1rem;
    background: linear-gradient(white, whitesmoke);
    &:active {
      translate: 0 1px;
      box-shadow: none;
    }
  }
}

.password-input-wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  button {
    display: grid;
    place-items: center;
    svg {
      &:last-of-type {
        display: none;
      }
    }
  }
  button[aria-pressed="true"] {
    svg {
      &:first-of-type {
        display: none;
      }
      &:last-of-type {
        display: block;
      }
    }
  }
}

.input-wrapper {
  display: grid;
  gap: 0.4rem;
  label {
    justify-self: start;
  }
}

.visually-hidden {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}
:is(input, button) {
  font: inherit;
  padding-block: 0.5rem;
  border: 1px solid lightgray;
  border-radius: 0.25rem;
  box-shadow: 0 2px 6px -4px rgba(0, 0, 0, 0.2);
}

.password-rules {
  &__meter {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    max-inline-size: 10rem;
    span {
      width: 100%;
      height: 0.25rem;
      background-color: lightgray;
      border-radius: 360px;
      transition: background-color 100ms ease-out;
    }
    .password-rules__score {
      &::before {
        display: block;
        counter-reset: score var(--score, 0) total var(--total, 5);
        content: counter(score) "/" counter(total);
        font-feature-settings: "tnum";
        font-size: 0.8em;
      }
    }
  }
  &__checklist {
    --flow: 0.3rem;
    padding-inline-start: 1.2em;
    li {
      position: relative;
      list-style-type: circle;
    }
    .is-match {
      &::before {
        content: "✅";
        position: absolute;
        top: 0;
        right: calc(100% + 0.25em);
        font-size: 0.9em;
      }
    }
  }
}
password-rules {
  &[data-score="1"] .password-rules__meter :first-child,
  &[data-score="2"] .password-rules__meter :nth-child(-n + 2),
  &[data-score="3"] .password-rules__meter :nth-child(-n + 3),
  &[data-score="4"] .password-rules__meter :nth-child(-n + 4) {
    background-color: dodgerblue;
  }
  &[data-score="5"] .password-rules__meter :nth-child(-n + 5) {
    background-color: mediumseagreen;
  }
}
